<template>
  <div class="energy-box">
    <div class="energy-logo">
      <img src="/static/energy.png" alt="">
    </div>
    <div class="energy-number">

      X{{energy}}
      <img src="/static/addEnergy.png" @click="addEnergy" alt="">
       <div class="sub-animate" :class="{flyUp:isSub}">
          <img src="/static/energy.png" alt=""> -5
        </div>
    </div>
    <div class="time" v-if="energy<maxEnergy">
      {{formateTime}}后+1
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: ["countTime","energy","baseTime","isSub"],
  data(){
    return {
      timer:null,//定时器
      currentTime:0,
      baseAddEngergy:1,
      // formateTime:"00:00",
    }
  },

  watch:{
    currentTime(val){
      // 0的时候 判断 体力加1， 判断体力是否满了
      if(val==0&&this.energy<this.maxEnergy){
        // 调用接口 体力+1
        this.currentTime=this.baseTime;
        this.fly.post('/updateStrength',{
          count:this.baseAddEngergy,
          type:0,
        }).then(res=>{
          console.log('体力增加成功')
        })
        this.setEnergy(this.energy+this.baseAddEngergy);
      }
      if(val==0&&this.energy==this.maxEnergy){ //体力满了
        this.stopTimer();
      }
    },
    countTime(){
      this.checkEnergy();
    },
  },
  computed:{
    ...mapState(["maxEnergy","baseAddEngergy"]),
    formateTime(){
      let m,s;
      m = parseInt(this.currentTime/60); //分钟
      m=''+m;
      if(m.length<2){
        m ="0"+m;
      }
      s = this.currentTime%60;
      s = ''+s;
        if(s.length<2){
        s ="0"+s;
      }
      return m+":"+s;
    },
  },
  methods:{
    ...mapMutations(["setEnergy"]),

    checkEnergy(){ //检查体力
      clearInterval(this.timer);
      if(this.energy<this.maxEnergy){ //
        if(this.countTime==0){
          this.currentTime = this.baseTime;
        }else{
          this.currentTime = this.countTime;
        }
         this.startTimer();
      }else if(this.energy==this.maxEnergy){
          this.currentTime = 0;
      }

    },
    startTimer(){
      this.timer=setInterval(()=>{
        this.currentTime--;
      },1000)
    },
    stopTimer(){
      clearInterval(this.timer);
    },
    exit(){
      this.stopTimer();
      this.fly.post('/exitSubject',{
        subjectId:0,
        type:0,
        replyCount:0,
        promptCount:0,
        isExit:0,
        intervalTimer:this.currentTime||0,
      })
    },
    addEnergy(){
      this.$emit("add")
    }
  },
  mounted(){
    this.checkEnergy();    
  },
  onShow(){
    this.checkEnergy();
  },
  onHide(){
    this.exit();
  },
  onUnload(){
    this.exit();
  }
};
</script>

<style lang="scss" scoped>
.energy-box {
  width: 220rpx;
  height: 100rpx;
  position: relative;
}
.energy-logo,
.energy-number {
  display: flex;
  justify-content: center;
  align-items: center;
}
.energy-logo {
  position: absolute;
  width: 87rpx;
  height: 87rpx;
  border: 4rpx solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f47182;
  z-index: 2;
  img {
    width: 56rpx;
    height: 56rpx;
  }
}
.energy-number {
  position: absolute;
  width: 150rpx;
  height: 50rpx;
  top: 50%;
  transform: translateY(-50%);
  left: 70rpx;
  font-size: 30rpx;
  color: #f46087;
  background: #fff;
  border-radius: 999rpx;
  justify-content: center;
  padding-right: 16rpx;
  box-sizing: border-box;
  &>img{
    width: 39rpx;
    height: 38rpx;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    right: 8rpx;
  }
}
.sub-animate {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
  opacity: 0;
  img {
    width: 56rpx;
    height: 56rpx;
    margin-right: 10rpx;
  }
  font-size: 30rpx;
  font-weight: bold;
  color: #fff;
}
.flyUp{
  z-index: 5;
  animation: fly 1s ease;
  opacity: 1;
}
@keyframes fly {
  0%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(-100rpx);
  }
}
.time{
  position: absolute;
  font-size: 24rpx;
  color: #ffd7dc;
  width: 140rpx;
  text-align: center;
  right: 0;
  bottom: -4rpx;
}
.isSub{

}
</style>
